<template>
  <div id="subLine-controller">
    <div class="item-wrapper">
      <div
        class="item"
        v-for="item in subLineData"
        :key="item.name"
        @click.stop="handleItemClick(item)"
      >
        <div
          class="box"
          :style="{ borderColor: item.color, backgroundColor: item.color }"
        ></div>
        <span :style="{ color: '#34c5cf' }">{{ item.name.slice(-3) }}</span>
      </div>
    </div>
  </div>
  <div class="active-panel">
    <div class="header">
      <strong>重点活动</strong>
      <span>{{ date }}</span>
    </div>
    <div class="content">
      <div class="active-wrapper" v-if="activityData.length">
        <div
          class="active-item"
          :class="{ 'item-active': item.isActive }"
          v-for="item in activityData"
          :key="item.id"
          @click="clickActiveItem(item)"
        >
          <div>{{ item.activedTime }}</div>
          <div>{{ item.activedPlace }}</div>
          <div>{{ item.activity }}</div>
        </div>
      </div>
      <a-empty v-else description="无数据" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useLineStore } from '@/store/lineStore'
import { activityData as mockActivityData } from '@/store/staticData.js'
import * as Cesium from 'cesium'
import {
  flyToLine,
  binkLineByName,
  removeAllCones,
  addGradientCone,
  flyToCone,
} from '@/cesiumTools/effectController'

const lineStore = useLineStore()
const subLineData = lineStore.subLineData
const activityData = ref(mockActivityData)
const date = ref(new Date().toLocaleDateString())
const viewer = ref(null)

onMounted(() => {
  viewer.value = lineStore.viewer // 假设Viewer已在主视图初始化
})

const handleItemClick = (item) => {
  const { name, stationsList, color } = item
  flyToLine(viewer.value, name)
  binkLineByName(viewer.value, name)
  lineStore.setCurrentStations(stationsList)
  showActiveArea(color)
}

const showActiveArea = (color) => {
  removeAllCones(viewer.value)
  const activityIds = activityData.value.map((item) => item.id)
  const currentStations = lineStore.currentStations || []
  const activedStations = currentStations.filter((item) =>
    activityIds.includes(item.id)
  )
  activedStations.forEach((station) => {
    addGradientCone(viewer.value, {
      position: {
        lng: station.lng,
        lat: station.lat,
        height: station.height || 0,
      },
      color,
      name: `活动圆柱-${station.id}`,
    })
  })
}

const clickActiveItem = (item) => {
  flyToCone(viewer.value, `活动圆柱-${item.id}`)
}
</script>

<style scoped>
#subLine-controller {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 146px;
  z-index: 1000;
}
.item-wrapper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  cursor: pointer;
  text-align: center;
  padding: 4px;
}
.box {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid #fff;
  margin: 0 auto 4px;
}
.active-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 16px;
  border-radius: 8px;
}
.active-item {
  padding: 8px;
  border-bottom: 1px solid #333;
  cursor: pointer;
}
.active-item:hover {
  background: rgba(52, 197, 207, 0.1);
}
.item-active {
  border-left: 3px solid #34c5cf;
}
</style>
